<template>
  <div id="chart2">
    <el-table :data="props.data" border>
      <el-table-column
        prop="ColText"
        :label="$t('Tab.Chart2.Time')"
        min-width="25%"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="TargetQuantity"
        :label="$t('Tab.Chart2.Target')"
        min-width="25%"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="CSewQuantity"
        :label="$t('Tab.Chart2.Finished')"
        min-width="25%"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="Percent"
        :label="$t('Tab.Chart2.Rate')"
        min-width="25%"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { IChart2Data } from '@/interface/index';

const props = defineProps<{
  data: Array<IChart2Data>;
}>();
</script>

<style lang="scss" scoped>
div#chart2 {
  height: 100%;
}
:deep(.el-table) {
  background-color: #000000;
  .el-table__cell {
    height: 150px;
    background-color: #000000;
    color: #ffffff;
    padding: 0px;
    .cell {
      line-height: 150px;
      font-size: xx-large;
      padding: 0px;
    }
  }
}
</style>
@/types
